<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item @click="navigateToChinaCharts" style="cursor: pointer;font-weight: bold; font-size: 18px; margin-left: 20px;">
      主页
    </el-breadcrumb-item>
    <el-breadcrumb-item :key="index" v-for="(item, index) in currentpath" style="font-size:18px">
      {{ item }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>


<script setup>
import { ArrowRight } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { watch, ref } from 'vue';

const paths = {
  SupervisorManage: ['用户管理', '公众监督员管理'],
  GridmanManage: ['用户管理', '网格员管理'],
  FeedbackView: ['公众监督数据管理', '公众监督数据列表'],
  ComfirmView: ['公众监督数据管理', '确认AQI数据列表'],
  ProvinceGroupView: ['统计数据管理', '省分组检查统计'],
  AQIDistribution: ['统计数据管理', 'AQI指数分布统计'],
  AQITrendView: ['统计数据管理', 'AQI指数趋势统计'],
  OtherDataView: ['统计数据管理', '其他数据统计'],
  IndividualCenter: ['个人中心'],
  reportView: ['反馈中心', '提交反馈'],
  HistoryReportList: ['反馈中心', '历史反馈记录'],
  MonitorTaskView: ['任务中心', '检测任务列表'],
  HistoryTaskList: ['任务中心', '历史检测记录'],
  PersonalInfo: ['个人信息', '查看个人信息'],
  UpdatePsw: ['个人信息', '登录密码'],
  cancel: ['个人信息', '账号注销'],
  UploadAvatar: ['个人信息', '更换头像']
};

const currentpath = ref([]);
// 实例化路由对象
const router = useRouter();

const navigateToChinaCharts = () => {
  router.push('/ChinaCharts');
};

// 监听当前路由
watch(
  () => router.currentRoute.value, // 监听路径的改变
  (newValue) => {
    currentpath.value = paths[newValue.name] || [];
  },
  { immediate: true } // immediate 立即生效
);
</script>


<style scoped>
.breadcrumb .el-breadcrumb__separator {
  font-size: 20px; /* 修改箭头大小 */
}
</style>